<template>
<!-- 这是确认订单，页面 -->
  <div id="transport">
      <div class="transport_title">
        <paymentTitleBar :payTitle="payTitle" @childValue="childValue"></paymentTitleBar>
      </div>
      <div class="transport_form" v-if="orderBool">
        <div :class="['Shipping_address_column', EAbool ? 'SACCalass' : '']">
          <h4>{{$t("Transport.receivingAddress")}}</h4>
          <!-- <div :class="['Shipping_address', address.choiceClass == '1' ? 'isdefaultCalass' : '']" v-for="(address, index) in receivingInformation" :key="address.id" @click="selectAddress(index)"> -->
          <div :class="['Shipping_address', address.id == ruleForm.addressID ? 'isdefaultCalass' : '']" v-for="(address, index) in receivingInformation" :key="address.id" @click="selectAddress(index)">
            <i class="el-icon-close" @click.stop="del(index)"></i>
            <div><h4>{{address.realname}}</h4></div>
            <div>{{address.mobile}}</div>
            <div>{{address.province}} {{address.city}} {{address.area}}</div>
            <div>{{address.address}}</div>
            <p><span class="modifyNone" @click.stop="changeAddress(index)">{{$t("Transport.modify")}}</span></p>
          </div>
          <div class="Shipping_address" @click="AddNewAddress">
            <div class="Add_shipping_address">
              <i class="el-icon-circle-plus"></i>
              <div><span>{{$t("Transport.newAddress")}}</span></div>
            </div>
          </div>
        </div>
        <div class="extended_Address" v-if="EARendering">
          <p @click="showHide">{{EAtext}}</p>
        </div>
        <el-form :model="ruleForm" :rules="rules" label-position="top" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item class="wares_border">
                <div class="delivery_detail">
                  <p>{{$t("Transport.commodity")}}</p>
                  <ul class="delivery_ul">
                    <li>
                      <table class="ul_li_table">
                        <tr v-for="item in wares" :key="item.goods_id">
                          <td>
                            <div class="detail_Img"><router-link :to="{path:'/goodsDetail', query:{id: item.goods_id}}"><img :src="url + item.goods_image" alt=""></router-link></div>
                          </td>
                          <td>
                            <div class="detail_Text"><span class="discount" v-show="level === 1 && item.isnodiscount === 0">折扣</span><router-link :to="{path:'/goodsDetail', query:{id: item.goods_id}}">{{item.title}}</router-link></div>
                          </td>
                          <td>
                            <div class="danjiaNum">{{item.min_price | price(level, item.isnodiscount)}}元 × {{item.num}}</div>
                          </td>
                          <td>
                            <div class="moeni">{{item.min_price * item.num | price(level, item.isnodiscount)}} 元</div>
                          </td>
                        </tr>
                      </table>
                    </li>
                    <li><div class="detail_distribution public">{{$t("Transport.mode")}}</div><div class="express">包邮</div></li>
                    <li>
                      <div class="detail_invoice public">{{$t("Transport.invoice")}}</div>
                      <div class="personal">
                        <span>纸质发票</span>
                        <span class="per_style">{{invoiceText}}</span>
                        <span>商品明细</span>
                      </div>
                      <span class="modify" @click="modifyInvoice">修改 &gt;</span>
                    </li>
                    <li>
                      <div class="leaving_Message public">{{$t("Transport.leavingMessage")}}</div>
                      <div class="leavingMText"><el-input type="textarea" maxlength=100 resize="none" :rows="2" v-model="leavingMText" :placeholder="$t('Transport.LM')"></el-input></div>
                    </li>
                  </ul>
                  <div class="delivery_bill">
                    <!-- <div class="bill_left">
                      <div class="bill_coupon"><i class="el-icon-circle-plus"></i>使用优惠卷</div>
                    </div> -->
                    <div class="bill_right">
                      <div class="bill_text">
                        <div class="bill_list">
                          <div class="list_left">{{$t("Transport.number")}} :</div>
                          <div class="list_right"><span>{{totalNum}}</span> 件</div>
                        </div>
                        <div class="bill_list">
                          <div class="list_left">{{$t("Transport.totalPrice")}} :</div>
                          <div class="list_right"><span>{{totalPrice | decimal}}</span> 元</div>
                        </div>
                        <div class="bill_list" v-show="discountBool">
                          <div class="list_left">{{$t("Transport.discount")}} :</div>
                          <div class="list_right"><span>- {{totalPrice - sum | decimal}}</span> 元</div>
                        </div>
                        <!-- <div class="bill_list">
                          <div class="list_left">优惠卷抵扣 :</div>
                          <div class="list_right"><span>- 0</span> 元</div>
                        </div> -->
                        <div class="bill_list">
                          <div class="list_left">{{$t("Transport.freight")}} :</div>
                          <div class="list_right"><span>0</span> 元</div>
                        </div>
                        <div class="bill_list">
                          <!-- 应付总额 -->
                          <div class="list_left">{{$t("Transport.copeWith")}} :</div>
                          <div class="list_right"><span class="fonsize">{{sum | decimal}}</span> 元</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            </el-form-item>
            <el-form-item class="bottom_right">
                <el-button><router-link to="/Shopping">{{$t("Transport.return")}}</router-link></el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">{{$t("Transport.settlement")}}</el-button>
            </el-form-item>
        </el-form>
        <!-- 修改发票弹框 -->
        <!-- <div class="sss"> -->
          <el-dialog
            :title="$t('orderDetails.invoiceInformation')"
            :center="true"
            @close="invoiceCloseCallback"
            :visible.sync="dialogVisible"
            :before-close="invoiceClose">
            <div class="Invoice_information">
              <div class="Invoice_type">
                <p>{{$t("orderDetails.invoiceType")}}：</p>
                <span>纸质发票</span>
              </div>
              <div class="Invoice_title">
                <p>{{$t("orderDetails.invoiceTitle")}}：</p>
                <el-radio-group v-model="invoiceTitle" size="medium">
                  <el-radio-button label="personal">个人</el-radio-button>
                  <el-radio-button label="enterprise">单位</el-radio-button>
                </el-radio-group>

                <el-form v-show="inputBool" :model="personal" status-icon :rules="invRules1" ref="personal" label-width="100px" class="demo-ruleForm">
                  <el-form-item prop="personalInput" >
                    <el-input type="text"  v-model.trim="personal.personalInput" autocomplete="off" :placeholder="$t('Transport.personalInformation')" :validate-event="false"></el-input>
                  </el-form-item>
                </el-form>
                <el-form v-show="!inputBool" :model="enterprise" status-icon :rules="invRules2" ref="enterprise" label-width="100px" class="demo-ruleForm">
                  <el-form-item prop="enterpriseInput">
                    <el-input type="text" v-model.trim="enterprise.enterpriseInput" autocomplete="off" :placeholder="$t('Transport.unitInformation')" :validate-event="false"></el-input>
                  </el-form-item>
                  <el-form-item prop="taxesInput">
                    <el-input type="text" v-model.trim="enterprise.taxesInput" autocomplete="off" :placeholder="$t('Transport.distinguish')" maxlength="20" :validate-event="false"></el-input>
                  </el-form-item>
                </el-form>

                <!-- <el-input v-model="invoiceInput1" v-show="inputBool" placeholder="请输入发票抬头"></el-input>
                <el-input v-model="invoiceInput2" v-show="!inputBool" placeholder="请输入发票抬头"></el-input> -->
              </div>
              <div class="Invoice_content">
                <p>{{$t("orderDetails.invoiceContent")}}：</p>
                <span>{{$t("Transport.details")}}</span>
              </div>
              <div class="Invoice_instructions">
                <p>{{$t("Transport.Notice")}}：</p>
                <span class="Explanatory_text">1.{{$t("Transport.Notice1")}}</span>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">{{$t("Shopping.no")}}</el-button>
              <el-button type="primary" @click="confirmModification(`${invoiceTitle}`)">{{$t("Shopping.yes")}}</el-button>
            </span>
          </el-dialog>
        <!-- </div> -->

        <!-- 修改收货地址弹框 -->
        <el-dialog
          :title="modifySA.modifySA_title"
          @close="SAVCloseCallback"
          :visible.sync="SAVisible"
          width="40%">
          <el-form :model="ruleForm" :rules="rules" label-position="top" ref="ruleForm" label-width="100px">
            <el-form-item prop="name" class="Shipping_address_name">
                <el-input v-model.trim="ruleForm.name" :placeholder="$t('Transport.name')"></el-input>
            </el-form-item>
            <el-form-item prop="phone" class="Receiving_mobile_number">
                <el-input v-model.trim="ruleForm.phone" :placeholder="$t('Transport.phone')"></el-input>
            </el-form-item>
            <el-form-item prop="desc">
              <!-- 地区选择器 -->
              <v-distpicker :province="ruleForm.province" :city="ruleForm.city" :area="ruleForm.area" @selected="selected"></v-distpicker>
              <el-input class="disInput" type="textarea" resize="none" :rows="2" v-model="ruleForm.desc" :placeholder="$t('Transport.detailedAddress')"></el-input>
              
            </el-form-item>
          </el-form>
          <span>{{$t("addressManagement.default")}} </span>
          <el-switch v-model="switchValue" :width="35" inactive-color="#ccc"></el-switch>
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancelSAVisible">{{$t("Shopping.no")}}</el-button>
            <el-button type="primary" @click="confirmSAVisible">{{$t("Shopping.yes")}}</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="select_products" v-else>
        <img src="../../../public/img/saleoff-mitu.png" alt="">
        <h3>{{$t("Transport.choice")}}</h3>
        <div><router-link to="/">{{$t("payment.home")}}</router-link>|<router-link to="/shopping">{{$t("Transport.return")}}</router-link></div>
      </div>
  </div>
</template>

<script>
import VDistpicker from "v-distpicker";
import paymentTitleBar from "@/components/PaymentTitleBar";
export default {
data() {
    return {
        payTitle: {title: this.$t("Transport.title"), id: "transport"}, // 标题
        orderBool: true,  // 根据是否有结算商品，来显示订单界面还是没有订单界面
        openid: this.$Cookie.getCookie("userID"),  // 微信openid
        // 收货地址
        receivingInformation: [],
        // 修改收货地址标题
        modifySA: {
          modifySA_title: "",
        },
        // 个人发票输入框 
        personal: {
          personalInput: "",
        },
        // 单位发票输入框 
        enterprise: {
          enterpriseInput: "",
          taxesInput: ""
        },
        // 个人发票验证
        invRules1: {
          personalInput: [
            {required: true, message: "请输入个人名称"}
          ],
        },
        // 单位发票验证
        invRules2: {
          enterpriseInput: [
            {required: true, message: "请输入单位名称"}
          ],
          taxesInput: [
            {required: true, message: "请输入纳税人识别号"},
            {required: true, pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/, message:"请输入正确的纳税人识别号", trigger: "blur"}
          ],
        },
        SAVisible: false, // 是否打开收货地址
        region: "",   //送货地址
        orderAddress: "",   //地区 + 详情地址
        switchValue: false,  // 是否设为默认地址
        EARendering: false, //是否显示更多收货地址栏
        EAtext: this.$t("Transport.display"), // 更多收货地址，标题
        EAbool: false,  // 是否显示更多收货地址
        wares: [],  // 商品列表清单
        dialogVisible: false,  // 修改发票弹框
        invoiceTitle: "personal", //发票抬头单选框
        invoiceText: "个人",  //发票抬头文字
        taxNumber: "",      // 发票纳税人识别号
        inputBool: true,  //发票抬头输入框切换
        totalNum: 0,  //总件数
        sum: 0,   //应付总额
        totalPrice: 0,    // 商品总价
        orderCode: "",  //订单号
        url: "https://mp.uekea.cn/attachment/", //图片拼接
        ruleForm: {
          index: "",
          name: "", 
          phone: "",
          desc: ""  ,//详细地址
          province: "",   //省份
          city: "",   //城市
          area: "",   //地区
          addressID: "",  //选择收货地址的id
          isdefault: "",  //是否设为默认地址
        },
        rules: {
          name: [
            { required: true, message: "请输入姓名", trigger: "blur" },
            { pattern: /^[a-zA-Z\u4e00-\u9fa5]{2,15}$/, message: "姓名只能字母或者中文，2-15字符",trigger: "blur"}
          ],
          phone: [
            { required: true, message: "请输入11位手机号码", trigger: "blur" },
            { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: "手机号码不正确！",trigger: "blur"}
          ],
          desc: [
            { required: true, message: "请填写详细地址", trigger: "blur" }
          ]
        },
        leavingMText: "",     // 给店家的留言
        level: null,          // 用户等级，null 普通用户，1 vip
        discountBool: false,           // 会员优惠，显示隐藏
    };
  },
  components: {
    VDistpicker,
    paymentTitleBar
  },
  methods: {
    // 修改收货地址
    changeAddress(index) {
      var _this = this;
      this.SAVisible = true;
      this.modifySA.modifySA_title = this.$t("Transport.changeAddress");
      // this.modifySA.modifySA_title = "修改收货地址";
      if(this.receivingInformation[index].isdefault == "1") {
        _this.switchValue = true;
        _this.ruleForm.isdefault = "1";
      } else {
        _this.switchValue = false;
        _this.ruleForm.isdefault = "0";
      }
      _this.ruleForm.index = JSON.stringify(index);  // 收货地址数组，下标
      _this.ruleForm.name = _this.receivingInformation[index].realname;  //姓名
      _this.ruleForm.phone = _this.receivingInformation[index].mobile;  // 手机号码
      _this.ruleForm.desc = _this.receivingInformation[index].address;  //详细地址

      _this.ruleForm.province = _this.receivingInformation[index].province; //省
      _this.ruleForm.city = _this.receivingInformation[index].city; //市
      _this.ruleForm.area = _this.receivingInformation[index].area; //区
    },
    // 添加收货地址
    AddNewAddress() {
      this.SAVisible = true;
      this.modifySA.modifySA_title = this.$t("Transport.newAddress");
    },
    // 确定，修改或者添加收货地址
    confirmSAVisible() {
      var _this = this;
      _this.$refs["ruleForm"].validate((valid) => {
        if(valid) {
          let num = Number(_this.ruleForm.index);
          let modifyName = _this.ruleForm.name.replace(/\s*/g,"");
          let modifyPhone = _this.ruleForm.phone.replace(/\s*/g,"");
          let modifyProvince = _this.ruleForm.province.replace(/\s*/g,"");
          let modifyCity = _this.ruleForm.city.replace(/\s*/g,"");
          let modifyArea = _this.ruleForm.area.replace(/\s*/g,"");
          let modifyDesc = _this.ruleForm.desc.replace(/\s*/g,"");
          if(_this.ruleForm.index != "") {
            // 修改
            if(_this.switchValue) {
              for(let i = 0; i < _this.receivingInformation.length; i++) {
                _this.receivingInformation[i].isdefault = "0";
              }
              _this.ruleForm.isdefault = "1";
            } else {
              _this.ruleForm.isdefault = "0";
            }
            if(_this.ruleForm.area.length > 1) {
              if(_this.receivingInformation[num].realname.replace(/\s*/g,"") != modifyName || _this.receivingInformation[num].mobile.replace(/\s*/g,"") != modifyPhone || _this.receivingInformation[num].province.replace(/\s*/g,"") != modifyProvince || _this.receivingInformation[num].city.replace(/\s*/g,"") != modifyCity || _this.receivingInformation[num].area.replace(/\s*/g,"") != modifyArea || _this.receivingInformation[num].address.replace(/\s*/g,"") != modifyDesc || _this.receivingInformation[num].isdefault != _this.ruleForm.isdefault) {
                // 修改收货地址，接口
                _this.$put(`user/address/${_this.openid}/${_this.receivingInformation[num].id}`,{
                  realname: _this.ruleForm.name,
                  mobile: _this.ruleForm.phone,
                  province: _this.ruleForm.province,
                  city: _this.ruleForm.city,
                  area: _this.ruleForm.area,
                  address: _this.ruleForm.desc,
                  isdefault: _this.ruleForm.isdefault,
                  zipcode: ""
                }).then(res=>{
                  if(res.code == 201) {
                    _this.ruleForm.index = "";
                    _this.receivingInformation[num].realname = _this.ruleForm.name;
                    _this.receivingInformation[num].mobile = _this.ruleForm.phone;
                    _this.receivingInformation[num].province = _this.ruleForm.province;
                    _this.receivingInformation[num].city = _this.ruleForm.city;
                    _this.receivingInformation[num].area = _this.ruleForm.area;
                    _this.receivingInformation[num].address = _this.ruleForm.desc;
                    _this.receivingInformation[num].isdefault = _this.ruleForm.isdefault;
                    _this.SAVisible = false;
                  } else {
                    _this.$MessageAlert(true, res.data, "error")
                    _this.SAVisible = false;
                  }
                  
                }).catch(()=>{
                  _this.SAVisible = false;
                })
              } else {
                _this.SAVisible = false;
                _this.$MessageAlert(true, "地址相同，不进行修改", "success")
              }
            } else {
              _this.$MessageAlert(true, "请选择地区", "error")
            }
          } else {
            // 添加
            let obj = {};
            if(_this.switchValue) {
              obj.isdefault = "1";
            } else {
              obj.isdefault = "0";
            }
            // 判断地区，是否为空
            if(_this.ruleForm.area !== "" && _this.ruleForm.area !== "区") {
              // 添加收货地址，接口
              _this.$post("user/address", {
                openid: _this.openid,
                realname: _this.ruleForm.name,
                mobile: _this.ruleForm.phone,
                province: _this.ruleForm.province,
                city: _this.ruleForm.city,
                area: _this.ruleForm.area,
                address: _this.ruleForm.desc,
                isdefault: obj.isdefault,
                zipcode: ""
              }).then(res=>{
                if(res.code == 201) {
                  // 获取收货地址
                  _this.getAddress();
                }
                _this.SAVisible = false;
              }).catch(()=>{
                _this.SAVisible = false;
              })
            } else {
              _this.$MessageAlert(true, "请选择地区", "error");
            }
            
          }
        }
      })
      
    },
    // 取消，修改或者添加收货地址
    cancelSAVisible() {
      this.SAVisible = false;
    },
    // 选择收货地址
    selectAddress(index) {
      this.ruleForm.addressID = this.receivingInformation[index].id;
      this.ruleForm.index = index;
    },
    // 付款，结算
    submitForm() {
      var _this = this;
      let orderObj = {};   // 订单
      // 判断金额和商品列表，是否为空
      if(_this.sum >= 0 && _this.wares.length > 0) {
        // 判断是否有选择收货地址
        if(_this.ruleForm.addressID != ""){
          for (const x of _this.receivingInformation) {
            // 判断收货地址数组和选择的收货地址id，相同，提前数组里面的收货地址信息，存储
            if(x.id == _this.ruleForm.addressID) {
              // x.mobile = x.mobile.substring(0, 3) + "****" + x.mobile.substr(-4, 4);  // 手机号码
              orderObj.ShippingAddress = x;   // 收货地址的全部信息
              break;
            }
          }
          if(_this.invoiceTitle == "personal") {
            orderObj.invoiceTitle = "个人";   // 发票抬头
          } else if(_this.invoiceTitle == "enterprise") {
            orderObj.invoiceTitle = "单位";   // 发票抬头
          }
          // 生成订单号后，渲染的商品列表数据被重新赋值，格式会改变，导致商品列表在页面显示不了
          _this.funCode();  //生成订单号

          orderObj.invoiceText = _this.invoiceText;   // 发票内容
          orderObj.taxNumber = _this.taxNumber;   // 发票纳税人识别号
          orderObj.wares = _this.wares;   // 商品清单
          orderObj.leavingMText = _this.leavingMText;   // 给店家留言
          orderObj.sum = _this.sum;   //结算金额
          orderObj.PageID = "Shopping";   // 页面id，判断是从购物车进程支付页面的，还是从订单进入支付页面的
          orderObj.orderCode = _this.orderCode;   // 订单号
          _this.$store.commit("order", orderObj);   // 存储订单信息到vuex
          _this.$router.push({"path": "./payment"});    // 跳转到支付页面
        } else {
          _this.$MessageAlert(true, "请选择收货地址", "error");
        }
      } else {
        _this.$MessageAlert(true, "没有商品，请去选择商品后再来", "error");
      }
    },
    // 地区选择器
    selected(data) {
          var _this = this;
          _this.ruleForm.province = data.province.value;
          _this.ruleForm.city = data.city.value;
          _this.ruleForm.area = data.area.value;
    },
    // 打开修改发票
    modifyInvoice() {
      var _this = this;
      _this.dialogVisible = true;
      let selTitle = sessionStorage.getItem("selTitle");
      if(selTitle != undefined && selTitle != "") {
        _this.invoiceTitle = selTitle;
      } else {
        _this.invoiceTitle = "personal";
      }
      if(_this.invoiceTitle == "personal") {
        _this.personal.personalInput = _this.invoiceText;  //个人输入框
        _this.enterprise.enterpriseInput = "";
        _this.enterprise.taxesInput = "";
      } else {
        _this.personal.personalInput = "个人";
        _this.enterprise.enterpriseInput = _this.invoiceText;  //单位输入框
        _this.enterprise.taxesInput = _this.taxNumber;  //单位纳税人识别号
      }
    },
    // 发票确定修改
    confirmModification(formName) {
      var _this = this;
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          // 判断为true，进入个人发票，false进入单位发票
          if(_this.inputBool && _this.personal.personalInput != "") {
            _this.invoiceText = _this.personal.personalInput;
            _this.dialogVisible = false;  //关闭发票修改框
          } else if(_this.enterprise.enterpriseInput != "") {
            _this.invoiceText = _this.enterprise.enterpriseInput;   // 发票单位名称
            _this.taxNumber = _this.enterprise.taxesInput;      // 发票纳税人识别号
            sessionStorage.setItem("taxNumber", _this.taxNumber);
            _this.dialogVisible = false;  //关闭发票修改框
          }
          sessionStorage.setItem("selTitle", _this.invoiceTitle);   // 发票抬头，单位还是个人
          sessionStorage.setItem("invText", _this.invoiceText);    // 发票内容
        } else {
          return false;
        }
      });
      // _this.invoiceText = JSON.parse(JSON.stringify(_this.invoiceInput));
      
    },
    // 给小于10的时间，前面添加0
    timeFormat(param) {
      // 小于10，数值前面加0，大于10，值就不改变
      return param < 10 ? "0" + param : param;
    },
    // 生成订单号
    funCode() {
      var _this = this;
      // 生成订单号前，要看一下，之前是否有订单号存在。
      
      let time = new Date();
      let orderTime = time.getFullYear() + "" + this.timeFormat(time.getMonth()+1) + this.timeFormat(time.getDate()) + this.timeFormat(time.getHours()) + this.timeFormat(time.getMinutes()) + this.timeFormat(time.getSeconds());
      let arr = JSON.parse(JSON.stringify(_this.wares));
      let newArr = [];  // 处理后的订单数据
      // 循环arr数据，判断订单号相同的就放一起
      // (注：返回的数据是一个商品一条数据，如果一个订单多个商品，就要进行处理，把相同订单商品放在同一个订单上。)
      for (let i = 0; i < arr.length; i++) {
        let dataArr = [];
        let ran = "";   // 随机数
        // 循环一次，dataArr就是空数组，添加到数组里面，下面进行判断
        dataArr.push(arr[i]);
        // 循环，i+1,如i=0,那么下面j=0，相当与和自身比较，所以j=i+1,直接进行下一位比较。
        for (let j = i+1; j < arr.length; j++) {
          // 判断dataArr数组第一个id是否和arr里面的id相同，因为dataArr数组在第一层循环只添加了一个，所以dataArr[0]
          if(dataArr[0].merch_id == arr[j].merch_id) {
            // 第一层循环就添加了一个到数组，所以后面有相同的直接添加到数组.
            dataArr.push(arr[j]);
            arr.splice(j, 1);
            // 数组删除后，里面的会往前进一位(例:如果删除了2下标的，下标3的前进一位会变成2，不减1，那么下标2就会跳过检测)
            j--;
          }
        };
        
        // 6位随机数
        for (let j = 0; j < 6; j++) {
          ran += Math.floor(Math.random() * 10);
        }
        dataArr.unshift("ME" + orderTime + (ran));
        newArr.push(dataArr);
      }
      let Mran = "";
      // 6位随机数
      for (let j = 0; j < 6; j++) {
        Mran += Math.floor(Math.random() * 10);
      }
      _this.orderCode = "ME" + orderTime + (Mran); // 虚假订单号，不显示，只请求数据使用
      _this.wares = newArr;       // 把新的商品列表格式，重新赋值，导致商品列表页面不显示

    },
    // 获取店铺手机号码，给支付页面判断
    getPhone(data) {
      var _this = this;
      _this.$post("brand/phone",{
        id: data
      }).then(res=>{
        if(res.code == 200) {
          _this.$store.commit("orderSMS", Object.values(res.data).join());
        }
      })
    },
    // 点击关闭图标，关闭发票弹框
    invoiceClose() {
      this.dialogVisible = false;
    },
    // 发票弹框关闭回调
    invoiceCloseCallback() {
      var _this = this;
      _this.personal.personalInput = "";
      _this.enterprise.enterpriseInput = "";
      _this.$refs["personal"].resetFields();
      _this.$refs["enterprise"].resetFields();
    },
    // 收货地址框的关闭回调
    SAVCloseCallback() {
      this.$refs["ruleForm"].resetFields();
      this.ruleForm.index = "";  //index，下标
      this.ruleForm.name = "";   //姓名
      this.ruleForm.phone = "";  // 手机号码
      this.ruleForm.desc = "";   //详细地址
      this.ruleForm.province = "";  //省
      this.ruleForm.city = "";  //市
      this.ruleForm.area = "";  //区
    },
    // 刷新
    storageInvoice() {
      // sessionStorage.setItem("invText", this.invoiceText);    // 发票抬头
      // alert("监听页面刷新，前进和后退")
      // this.$store.commit("checkS", []);  // 给空数组，清空 确认订单里面的商品数据
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 删除收货地址
    del(index) {
      var _this = this;
      _this.$confirm("此操作将删除该数据, 是否继续?"
      ).then(() => {
          // 删除收货地址
          _this.$dele(`user/address/${_this.openid}/${_this.receivingInformation[index].id}`
          ).then(res =>{
            if(res.code == 204) {
              _this.$MessageAlert(true, "删除成功", "success");
              _this.receivingInformation.splice(index, 1);
            }
          })
          if(_this.receivingInformation.length > 2) {
            _this.EARendering = true;
          } else {
            _this.EARendering = false;
          }
      }).catch(() => {
        _this.$MessageAlert(true, "已经取消删除", "success");
      });
    },
    // 显示隐藏，更多收货地址
    showHide() {
      if(this.receivingInformation.length > 2) {
        this.EAbool = this.EAbool ? false : true;
      }
      if(this.EAbool) {
        this.EAtext = this.$t("Transport.hide");
        // this.EAtext = "收起";
      } else {
        this.EAtext = this.$t("Transport.display");
        // this.EAtext = "显示";
      }
    },
    // 获取收货地址
    getAddress() {
      var _this = this;
      // 获取收货地址
      _this.$get(`user/address/${_this.openid}`).then(res=>{
        if(res.code == 200) {
          _this.receivingInformation = res.data;
          for(let i = 0; i < _this.receivingInformation.length; i++) {
            if(_this.receivingInformation[i].isdefault == "1") {
              _this.ruleForm.addressID = _this.receivingInformation[i].id;
              // 判断，当默认地址下标大于2，就显示全部
              if(i > 2) {
                _this.EAbool = true;
                // _this.EAtext = "收起"
                _this.EAtext = _this.$t("Transport.hide");
              } else {
                _this.EAbool = false;
                _this.EAtext = _this.$t("Transport.display");
                // _this.EAtext = "显示"
              }
            }
          }
          // 判断收货地址是否大于2，决定是否显示，更多收货地址栏
          if(_this.receivingInformation.length > 2) {
            _this.EARendering = true;
          } else {
            _this.EARendering = false;
          }
          
        }
      })
    },
    // 头部组件标题，传过来的值
    childValue() {
      console.log("");
    }
  },
  filters: {
    // 价格，保留两位小数
    decimal(n) {
      return n.toFixed(2);
    },
    price(n, level, isnodiscount) {
      let text = null;
      if(level === 1 && isnodiscount === 0) {
        text = Number(n) * 0.8;
      } else {
        text = Number(n);
      }
      return text.toFixed(2);
    }
  },
  created(){
    var _this = this;
    window.addEventListener("beforeunload", _this.storageInvoice());
    let checkS = _this.$store.state.commodityOrder;     // 拿vuex的购物车数据
    let taxNumber = sessionStorage.getItem("taxNumber");  // 发票抬头，个人
    // let userLevel = Number(_this.$Cookie.getCookie("userLevel"));   // 用户等级
    
    // let discount = 0.8;       // 会员折扣，设计师购买时的折扣
    if(taxNumber != undefined && taxNumber != "") {
      _this.taxNumber = taxNumber;
    }
    let invText = sessionStorage.getItem("invText");  // 发票抬头，个人
    if(invText != undefined && invText != "") {
      _this.invoiceText = invText;
    }
    if(checkS.length > 0) {
      let arr = [];
      _this.orderBool = true;
      // 获取收货地址
      _this.getAddress();
      // _this.level = userLevel;
      // for (let y = 0; y < checkS.length; y++) {
      //   _this.totalNum += parseInt(checkS[y].num);
      //   if(checkS[y].isnodiscount === 0 && userLevel === 1) {
      //     _this.sum += (checkS[y].min_price * discount) * checkS[y].num;
      //     _this.discountBool = true;
      //   } else {
      //     _this.sum += checkS[y].min_price * checkS[y].num;
      //   }
      //   _this.totalPrice += checkS[y].min_price * checkS[y].num;
      //   arr.push(checkS[y].merch_id);
      // }
      for (let y = 0; y < checkS.length; y++) {
        _this.totalNum += parseInt(checkS[y].num);
        _this.sum += checkS[y].min_price * checkS[y].num;
        _this.totalPrice += checkS[y].min_price * checkS[y].num;
        arr.push(checkS[y].merch_id);
      }
      _this.wares = checkS;
      let arr2= [...new Set(arr)];
      // 获取店铺手机号
      _this.getPhone(arr2.join());
      
    } else {
      _this.orderBool = false;
    }
    if(_this.receivingInformation.length > 2) {
      _this.EARendering = true;
    } else {
      _this.EARendering = false;
    }
  },
  watch: {
    invoiceTitle(da) {
      var _this = this;
      if(da == "personal") {
        _this.inputBool = true;
        if(_this.personal.personalInput == "") {
          _this.personal.personalInput = "个人";
        }
      } else {
        _this.inputBool = false;
      }
    }
  },
  // 离开当前页面时调用
  beforeDestroy() {
    this.storageInvoice();
  },
  destroyed() {
    window.removeEventListener("beforeunload", this.storageInvoice())
    sessionStorage.removeItem("selTitle");
    sessionStorage.removeItem("taxNumber");
    sessionStorage.removeItem("invText");
  }
}
</script>

<style lang="less" scoped>
#transport {
  min-width: 1000px;
}
.transport_form {
  width: 950px;
  margin: auto;
}
.select_products {
  width: 950px;
  margin: auto;
  padding: 0px 60px;
  text-align: center;
  padding-bottom: 100px;
  h3 {
    margin-top: 30px;
    margin-bottom: 25px;
  }
  a {
    margin: 0px 15px;
  }
}
// 
.Shipping_address_column {
  width: 950px;
  margin: auto;
  padding: 0px 60px;
  height: 215px;
  overflow: hidden;
  h4 {
    font-size: 17px;
    font-weight: 100;
    color: #444;
    text-transform:none;
    margin: 10px 0px;
  }
  .Shipping_address {
    color: #646262;
    margin: 10px 0px;
    padding: 15px 25px 0px;
    display: inline-block;
    border: 1px solid #ccc;
    width: 240px;
    margin-right: 20px;
    height: 155px;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    div {
      font-size: 13px;
      font-weight: 100;
    }
    p {
      margin-top: 15px;
      font-size: 14px;
      color: #ff6700;
      position: absolute;
      bottom: 3px;
      right: 25px;
    }
    .modifyNone {
      display: none;
    }
    .el-icon-close {
      position: absolute;
      top: 8px;
      right: 10px;
      font-size: 16px;
      display: none;
    }
  }
  .Shipping_address:hover {
    border-color: #ff6700;
    .el-icon-circle-plus {
      color: #b0b0b0;
      transition-duration: 0.3s;
    }
    .modifyNone {
      display: inline;
    }
    .el-icon-close {
      display: inline;
    }
  }
  .Add_shipping_address {
    margin-top: 39px;
    text-align: center;
    .el-icon-circle-plus {
      color: #e0e0e0;
      font-size: 32px;
      margin-bottom: 7px;
      transition-duration: 0.3s;
    }
    div {
      color: #b0b0b0;
    }
  }
  .isdefaultCalass {
    border: 1px solid #ff6700;
  }
}
.SACCalass {
  height: auto !important;
}
.Shipping_address_name {
  width: 47%;
  display: inline-block;
  vertical-align: middle;
}
.Receiving_mobile_number {
  width: 47%;
  display: inline-block;
  vertical-align: middle;
  margin-left: 6%;
}
// 
/deep/ .el-form-item__label {
  text-align: left;
  padding-left: 10px;
}
.transport_title {
  margin-bottom: 70px;
}
.demo-ruleForm {
  padding: 0px 60px;
  width: 950px;
  // min-width: 900px;
  margin: auto;
}
.extended_Address {
  margin-top: 10px;
  padding: 0px 60px;
  p {
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: RGB(236,236,236);
    color: #333;
    font-size: 13px;
    cursor: pointer;
  }
}
.delivery_detail {
  margin-top: 20px;
  p {
    color: #787878;
    font-size: 20px;
    font-weight: 200;
  }
}
.delivery_ul {
  li {
    line-height: 100px;
    border-bottom: 1px solid #ccc;
    div {
      display: inline-block;
    }
  }
  li:nth-child(1){
    display: flex;
    justify-content: space-around;
  }
  // li:last-child {
  //   line-height: 0px;
  // }
  .ul_li_table {
    width: 100%;
    text-align: center;
    tr {
      line-height: 70px;
      .detail_Text {
          margin-left: 20px;
          max-width: 320px;
          display: inline-block;
          vertical-align: middle;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          a {
            color: #444;
            text-decoration: none;
          }
          span {
            padding: 2px 4px;
            font-size: 13px;
            background-color: #FF5555;
            color: white;
            margin-right: 10px;
          }
      }
      td:nth-child(2) {
        text-align: left;
        width: 400px;
      }
      .moeni {
        color: #f25807;
      }
    }
  }
}
.detail_Img {
  height: 50px;
  width: 50px;
  display: inline-block;
  img {
      height: auto;
      width: auto;
  }
}

// 地区选择器
/deep/ .distpicker-address-wrapper select {
  font-size: 1.3rem;
}
.disInput {
  margin-top: 25px;
  margin-left: 0px !important;
  // border: 1px !important;
}
.express {
  text-indent: 30px;
  color: #f25807;
}
.personal {
  text-indent: 30px;
  span {
    color: #f25807;
  }
  .per_style {
    margin: 0px 18px;
  }
}
.modify {
  margin-left: 20px;
  cursor: pointer;
  color: #f25807;
}
.leavingMText {
  width: 80%;
}
/deep/ .el-textarea {
  // height: 100%;
  width: 100%;
  margin-left: 15px;
}
/deep/ .el-textarea__inner {
  height: 100px;
  // width: 400px;
  border: 0px;
}

.bill_left {
  display: inline-block;
}
.bill_right {
  float: right;
  .bill_list {
    height: 29px;
    line-height: 29px;
    .list_left {
      color: #787878;
      width: 200px;
      text-align: right;
      float: left;
      clear: both;
    }
    .list_right {
      color: #f25807;
      min-width: 100px;
      text-align: right;
      float: right;
      padding-left: 10px;
      .fonsize {
        font-size: 33px;
      }

    }
  }
  .bill_list:last-child {
    height: 33px;
    margin-top: 20px;
    .list_left {
      margin-top: 3px;
    }
  }
  
}
.bottom_right {
  text-align: right;
  margin-bottom: 80px;
  margin-top: 30px;
  .el-button {
    border-radius: 0px;
    // width: 120px;
    height: 42px;
  }
  .el-button+.el-button {
    margin-left: 40px;
    // width: 150px;
    background-color: #ff6700;
    border: #ff6700;
    font-size: 18px;
  }
  a {
    text-decoration: none;
    color: #555;
  }
}
.wares_border {
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
}
.bill_coupon {
  cursor:pointer;
}
.el-icon-circle-plus {
  color: #ff6700;
  margin-right: 5px;
  vertical-align: middle;
  font-size: 24px;
}
/deep/ .el-dialog {
  max-width: 600px;
  min-width: 500px;
}
.Invoice_information {
  p {
    display: inline-block;
    margin-right: 20px;
    font-size: 15px;
  }
  .Invoice_type{
    span {
      font-size: 14px;
      display: inline-block;
      border: 1px solid #FF8B3D;
      padding: 7px 70px;
      color: #FF8B3D;
    }
  }
  .Invoice_title {
    margin: 15px 0px;
    /deep/ .el-radio-button__inner {
      padding: 10px 70px;
      border-radius: 0px;
      border-color: #ccc;
    }
    /deep/ .el-radio-button__inner:hover {
      color: #FF8B3D;
    }
    /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
      color: #333;
      background-color: transparent;
      border-color: #FF8B3D;
      box-shadow: -1px 0 0 0 #FF8B3D;
    }
    // /deep/ .el-input {
    //   margin-top: 8px;
    //   width: 434px;
    //   // padding-left: 95px;
    //   /deep/ .el-input__inner {
    //     height: 35px;
    //     border-radius: 0px;
    //   }
    // }
    .demo-ruleForm {
      padding: 0px;
      width: 434px;
      margin: 0px;
      /deep/ .el-form-item__content {
        margin-left: 95px !important;
      }
      /deep/ .el-input__inner {
        height: 35px;
        border-radius: 0px;
      }
    }
  }
  .Invoice_instructions {
    p {
      vertical-align: top;
    }
    .Explanatory_text {
      display: inline-block;
      width: 350px;
      color: #888;
      font-size: 13px;
    }
  }
  
}
.public {
  width: 125px;
  color: #787878;
}
/deep/ .el-textarea__inner::placeholder {
  color: #909090;
}
</style>